<template>
  <div>
    <a-modal :visible="visible" title="评论" @ok="handleOk">
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
      </template>
      <a-textarea
          v-model:value="comment"
          placeholder="请输入你的评论"
          size="large">
      </a-textarea>
    </a-modal>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue';
import {message} from "ant-design-vue";

export default defineComponent({
  name: "commentTalk",
  props: ['talkId', 'visible'],
  methods: {
    handleCancel() {
      let obj = {comment: this.comment, visValue: false}
      this.$emit("closeCommentModal", obj)
      this.clearComment()
    },
    handleOk() {
      if (this.comment.length > 60) {
        message.error("不能超出评论字数")
        return
      }
      if (this.comment == '') {
        message.warn('评论内容不能为空')
        return;
      }
      //发起请求 对谁的说说进行回复 把数据存入
      let objData = {talkId: this.talkId, comment: this.comment}
      this.$httpPost("/xy/comment/add", objData).then(res => {
        //评论完以后 返回其主键id
        let obj = {comment: this.comment, visValue: false, createTime: res.data.createTime,commentId:res.data.commentId}
        this.$emit("closeCommentModal", obj)
        this.clearComment()
      })
    },
    clearComment() {
      this.comment = ''
    }
  },
  setup() {
    const comment = ref('');
    return {
      comment,
    };
  },

});
</script>

<style scoped>

</style>
